<template>
    <view class="container">
        <view class="form-box">
            <view class="form-item">
                <input class="username" :value="username" @input="bindUsernameInput" placeholder="用户名" auto-focus />
                <van-icon v-if="username.length > 0" id="clear-username" class="clear" name="close" @tap.native.stop.prevent="clearInput" />
            </view>

            <view class="form-item">
                <input class="password" :value="password" password @input="bindPasswordInput" placeholder="密码" />
                <van-icon class="clear" id="clear-password" v-if="password.length > 0" name="close" @tap.native.stop.prevent="clearInput" />
            </view>

            <view class="form-item">
                <input class="password" :value="confirmPassword" password @input="bindConfirmPasswordInput" placeholder="确认密码" />
                <van-icon class="clear" id="clear-confirm-password" v-if="confirmPassword.length > 0" name="close" @tap.native.stop.prevent="clearInput" />
            </view>

            <view class="form-item">
                <input class="mobile" :value="mobile" @input="bindMobileInput" placeholder="手机号" />
                <van-icon class="clear" id="clear-mobile" v-if="mobile.length > 0" name="close" @tap.native.stop.prevent="clearInput" />
            </view>

            <view class="form-item-code">
                <view class="form-item code-item">
                    <input class="code" :value="code" @input="bindCodeInput" placeholder="验证码" />
                    <van-icon class="clear" id="clear-code" v-if="code.length > 0" name="close" @tap.native.stop.prevent="clearInput" />
                </view>
                <view class="code-btn" @tap="sendCode">获取验证码</view>
            </view>

            <button type="primary" class="register-btn" @tap="startRegister">注册</button>
        </view>
    </view>
</template>

<script>
var api = require('../../../config/api.js');

var check = require('../../../utils/check.js');

var app = getApp();
export default {
    data() {
        return {
            username: {
                length: 0
            },
            password: {
                length: 0
            },
            confirmPassword: {
                length: 0
            },
            mobile: {
                length: 0
            },
            code: {
                length: 0
            }
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        // 页面渲染完成
    },
    onReady: function () {},
    onShow: function () {
        // 页面显示
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        sendCode: function () {
            let that = this;

            if (this.mobile.length == 0) {
                uni.showModal({
                    title: '错误信息',
                    content: '手机号不能为空',
                    showCancel: false
                });
                return false;
            }

            uni.request({
                url: api.AuthRegisterCaptcha,
                data: {
                    mobile: that.mobile
                },
                method: 'POST',
                header: {
                    'content-type': 'application/json'
                },
                success: function (res) {
                    if (res.data.errno == 0) {
                        uni.showModal({
                            title: '发送成功',
                            content: '验证码已发送',
                            showCancel: false
                        });
                    } else {
                        uni.showModal({
                            title: '错误信息',
                            content: res.data.errmsg,
                            showCancel: false
                        });
                    }
                }
            });
        },

        requestRegister: function (wxCode) {
            let that = this;
            uni.request({
                url: api.AuthRegister,
                data: {
                    username: that.username,
                    password: that.password,
                    mobile: that.mobile,
                    code: that.code,
                    wxCode: wxCode
                },
                method: 'POST',
                header: {
                    'content-type': 'application/json'
                },
                success: function (res) {
                    if (res.data.errno == 0) {
                        app.globalData.hasLogin = true;
                        uni.setStorageSync('userInfo', res.data.data.userInfo);
                        uni.setStorage({
                            key: 'token',
                            data: res.data.data.token,
                            success: function () {
                                uni.switchTab({
                                    url: '/pages/ucenter/index/index'
                                });
                            }
                        });
                    } else {
                        uni.showModal({
                            title: '错误信息',
                            content: res.data.errmsg,
                            showCancel: false
                        });
                    }
                }
            });
        },

        startRegister: function () {
            var that = this;

            if (this.password.length < 6 || this.username.length < 6) {
                uni.showModal({
                    title: '错误信息',
                    content: '用户名和密码不得少于6位',
                    showCancel: false
                });
                return false;
            }

            if (this.password != this.confirmPassword) {
                uni.showModal({
                    title: '错误信息',
                    content: '确认密码不一致',
                    showCancel: false
                });
                return false;
            }

            if (this.mobile.length == 0 || this.code.length == 0) {
                uni.showModal({
                    title: '错误信息',
                    content: '手机号和验证码不能为空',
                    showCancel: false
                });
                return false;
            }

            uni.login({
                success: function (res) {
                    if (!res.code) {
                        uni.showModal({
                            title: '错误信息',
                            content: '注册失败',
                            showCancel: false
                        });
                    }

                    that.requestRegister(res.code);
                }
            });
        },

        bindUsernameInput: function (e) {
            this.setData({
                username: e.detail.value
            });
        },

        bindPasswordInput: function (e) {
            this.setData({
                password: e.detail.value
            });
        },

        bindConfirmPasswordInput: function (e) {
            this.setData({
                confirmPassword: e.detail.value
            });
        },

        bindMobileInput: function (e) {
            this.setData({
                mobile: e.detail.value
            });
        },

        bindCodeInput: function (e) {
            this.setData({
                code: e.detail.value
            });
        },

        clearInput: function (e) {
            switch (e.currentTarget.id) {
                case 'clear-username':
                    this.setData({
                        username: ''
                    });
                    break;

                case 'clear-password':
                    this.setData({
                        password: ''
                    });
                    break;

                case 'clear-confirm-password':
                    this.setData({
                        confirmPassword: ''
                    });
                    break;

                case 'clear-mobile':
                    this.setData({
                        mobile: ''
                    });
                    break;

                case 'clear-code':
                    this.setData({
                        code: ''
                    });
                    break;
            }
        }
    }
};
</script>
<style>
@import './register.css';
</style>
